<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {include file="/layout/scriptload"}
    <title>微信菜单列表</title>
</head>
<body>
<div class="box">
    <section class="content-header">
        <ol class="breadcrumb">
            <li><a><i class="fa fa-dashboard"></i> 微信菜单管理</a></li>
            <li class="active">微信菜单列表</li>
            <li class="active">添加内容</li>
        </ol>
    </section>
    <!-- /.box-header -->
    <section class="content">
        <div class="box-body">
            <form role="form" id="form">
                <input type="hidden" id="hid" value="">
                <div class="form-group col-md-12" >
                    <label>菜单左名称</label>
                    <input type="text" id="category" class="form-control" value="" placeholder="菜单分类组...">
                </div>
                <div style="margin-bottom: 10px;margin-left: 5px;border-bottom: 1px solid #f1efee;padding-bottom: 10px;">
                    <h3 class="box-title" style="font-size: 18px;margin-right: 10px;">一级菜单</h3>
                </div>
                <div class="form-group col-md-4" >
                    <label>左菜单名称</label>
                    <input type="text" class="form-control" id="leftname" style="border-bottom: 0px;" value="" placeholder="左菜单名称...">
                    <div class="input-group">
                        <span class="input-group-addon btn btn-flat backcontent" iden="leftiden" style="background: #18bc9c;color: #ffffff;">左菜单格式</span>
                        <input type="text" id="leftiden" class="form-control" placeholder="左菜单格式..." disabled>
                    </div>
                </div>
                <div class="form-group col-md-4" >
                    <label>中菜单名称</label>
                    <input type="text" class="form-control" value="" id="middlename" style="border-bottom: 0px;" placeholder="中菜单名称...">
                    <div class="input-group">
                        <span class="input-group-addon btn btn-flat backcontent"  iden="middleiden" style="background: #18bc9c;color: #ffffff;">中菜单格式              </span>
                        <input type="text" class="form-control" id="middleiden" placeholder="中菜单格式..." disabled>
                    </div>
                </div>
                <div class="form-group col-md-4" >
                    <label>右菜单名称</label>
                    <input type="text" class="form-control" value="" id="rightname" style="border-bottom: 0px;" placeholder="右菜单名称...">
                    <div class="input-group">
                        <span class="input-group-addon btn btn-flat backcontent"  iden="rightiden" style="background: #18bc9c;color: #ffffff;">右菜单格式</span>
                        <input type="text" class="form-control" id="rightiden"  placeholder="..." disabled>
                    </div>
                </div>
                <div style="margin-bottom: 10px;margin-left: 5px;border-bottom: 1px solid #f1efee;padding-bottom: 10px;">
                    <h3 class="box-title" style="font-size: 18px;float:left;margin-right: 10px;">二级菜单</h3>
                    <div id="addInput" style="color: #f71752;cursor: pointer;">点击新增二级菜单</div>
                </div>
            </form>
            <div class="form-group col-md-12" >
                <div id="btn_add" class="btn bg-orange btn-flat pull-right">添加至菜单</div>
            </div>
        </div>
    <!-- /.box-body -->
    </section>
</div>
</body>
<script>
    var _num = 1;
    $(function(){
        $('#addInput').click(function(){
            var html = '<div class="form-group col-md-4" ><label>左菜单名称'+_num+'</label><input type="text" style="border-bottom: 0px;" id="leftname'+_num+'" class="form-control" value="" placeholder="左菜单名称'+_num+'...">';
            html+='<div class="input-group">';
            html+='<span class="input-group-addon btn btn-flat backcontent" iden="leftiden'+_num+'" style="background: #18bc9c;color: #ffffff;">左菜单格式'+_num+'</span> <input type="text" id="leftiden'+_num+'" class="form-control" placeholder="菜单左格式'+_num+'..." disabled>';
            html+='</div>';
            html+='</div>';
            html+= '<div class="form-group col-md-4" ><label>中菜单名称'+_num+'</label><input type="text" style="border-bottom: 0px;" id="middlename'+_num+'"  class="form-control" value="" placeholder="中菜单名称'+_num+'...">';
            html+='<div class="input-group">';
            html+='<span class="input-group-addon btn btn-flat backcontent" iden="middleiden'+_num+'" style="background: #18bc9c;color: #ffffff;">中菜单格式'+_num+'</span> <input id="middleiden'+_num+'" type="text" class="form-control" placeholder="菜单中格式'+_num+'..." disabled>';
            html+='</div>';
            html+='</div>';
            html+= '<div class="form-group col-md-4" ><label>右菜单名称'+_num+'</label><input type="text" style="border-bottom: 0px;" id="rightname'+_num+'"  class="form-control" value="" placeholder="右菜单名称'+_num+'...">';
            html+='<div class="input-group">';
            html+='<span class="input-group-addon btn btn-flat backcontent" iden="rightiden'+_num+'" style="background: #18bc9c;color: #ffffff;">右菜单格式'+_num+'</span> <input type="text" id="rightiden'+_num+'"  class="form-control" placeholder="菜单右格式'+_num+'..." disabled>';
            html+='</div>';
            html+='</div>';
            $('#form').append(html);
            _num = _num+1
        });
        $(document).on('click','.backcontent',function(){
            var _iden = $(this).attr('iden');
            $('#hid').val(_iden);
            url = "{:url('wechatmenu/addBackContent')}";
            layerWindow('定义回复内容',url,'80%','80%');
        });
        $('#btn_add').click(function(){
            var _category = $('#category').val();
            var _left = $('#leftiden').val();
            var leftname = $('#leftname').val();
            var _middle = $('#middleiden').val();
            var middlename = $('#middlename').val();
            var _right = $('#rightiden').val();
            var rightname = $('#rightname').val();
            if(_category == ''){
                layerAlert('请输入分类组名称');
                return false;
            }
            if(leftname == '' && middlename=='' && rightname==''){
                layerAlert('请至少输入选择一个菜单');
                return false;
            }
            var _data = [];
            var len = _num-1;
            for(i = 0;i < len; i++){
                var j=i+1;
                var _leftname = $('#leftname'+j+'').val();
                var _lefturl = $('#leftiden'+j+'').val();
                var _rightname = $('#rightname'+j+'').val();
                var _righturl = $('#rightiden'+j+'').val();
                var _middlename = $('#middlename'+j+'').val();
                var _middleurl = $('#middleiden'+j+'').val();
                _data.push({leftname:_leftname,lefturl:_lefturl,rightname:_rightname,righturl:_righturl,middlename:_middlename,middleurl:_middleurl});
            }
            $.ajax({
                type: 'post',
                cache: false,
                contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                url:'{:url("admin/Wechatmenu/doAddMenu")}',
                data: {category:_category,dataarr:_data,leftiden:_left,leftname:leftname,middle:_middle,middlename:middlename,right:_right,rightname:rightname},
                success: function(data) {
                    if(data.code=="0")
                    {
                        layerAlert('添加成功',function(){
                            layerParentClose();
                            parent.window.location.reload();
                        });
                    }
                },
                error: function() {
                    alert("发生系统错误,请与管理员联系！");
                }
            });
        });
    })
    function setval(_val){
        var _hid = $('#hid').val();
        $('#'+_hid+'').val(_val);
    }
</script>
</html>